<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>BaseLine Sample</title>
		<meta name="Description" content="" />
		<meta name="Keywords" content="" />

		<script type="text/javascript" src="../core/Jidea-core.js"></script>
		<script type="text/javascript" src="../core/Jidea-event.js"></script>
		<script type="text/javascript" src="../core/Jidea-math.js"></script>
		<script type="text/javascript" src="../core/Jidea-assert.js"></script>
		<script type="text/javascript" src="../core/Jidea-painter.js"></script>
		<script type="text/javascript" src="../core/Jidea-component.js"></script>
		<script type="text/javascript" src="../core/Jidea-interface.js"></script>
		<script type="text/javascript" src="../core/Jidea-legend.js"></script>
		<script type="text/javascript" src="../core/Jidea-label.js"></script>
		<script type="text/javascript" src="../core/Jidea-style.js"></script>
		<script type="text/javascript" src="../core/Jidea-chart.js"></script>
		<script type="text/javascript" src="../core/Jidea-coordinate.js"></script>
		<script type="text/javascript" src="../core/Jidea-element.js"></script>
		<script type="text/javascript" src="../core/Jidea-crosshair.js"></script>
		<script type="text/javascript" src="../core/Jidea-tip.js"></script>
		<script type="text/javascript" src="../core/Jidea-linesegment.js"></script>
		<script type="text/javascript" src="../core/Jidea-line.js"></script>
		<script type="text/javascript" src="../core/Jidea-linemonitor2d.js"></script>
		<script type="text/javascript" src="data.js"></script>
		<style type="text/css">
			body{
				margin-top:10px;
				text-align: center;
			}
			#myCanvas div{
				margin:0px auto;
			}
			#tools{
				margin:0px auto;
				width:780px;
				border:1px solid #07575a;
				padding:10px;
				height:50px;
				background-color: #a5c2d5;
			}
			#tools button{
				float: left;
				margin-right: 10px;
				height:30px;
			}
		</style>
		<script type="text/javascript">
			var line,queue;
			$(function(){
					line = new Jidea.LineMonitor2D({
							render : 'myCanvas',
							data: data4,
							align:'center',
							title : 'Real-Time Temperature Of Beijing',
							width : 800,
							height : 400,
							queue_size:37,
							segment_style:{
								intersection:true,
								point_size:3,
							},
							coordinate:{
								width:640,
								height:260,
								axis:{
									color:'#07575a',
									width:[2,2,2,2]
								},
								grids:{
									vertical:{
										way:'share_alike',
								 		value:18
									}
								},
								kedu:[{
									 position:'left',	
									 start_scale:0,
									 end_scale:40,
									 scale_line_enable:false,
									 scale:4,
									 listeners:{
										parseText:function(t,x,y){
											return {text:t+"℃"}
										}
									}
								},{
									 position:'right',
									 kedu2grid:false,
									 scale_line_enable:false,
									 textAlign:'right',
									 start_scale:0,
									 end_scale:40,
									 scale:4,
									 listeners:{
										parseText:function(t,x,y){
											return {text:t+"℃"}
										}
									}
								}]
							},
							listeners:{
								parsePoint:function(v,x,y){
									return {value:v+"℃"}
								}
							}
						});
					
					queue = line.createQueue({color:'#76a871'});
					for(var i=0;i<37;i++){
						queue.push(random());
					}
					//开始画图
					line.draw();
					
				});
				
				var t,temperature = 20;
				function start(btn){
					btn.disabled = true;
					t = setInterval("run()",1000);
					document.getElementById('cancel_btn').disabled = false;
				}
				
				function random(){
					var a = Math.floor(Math.random()*4);
					if(a%2==0){
						temperature += a
						if(temperature>40)
							temperature-=a*2;
					}else{
						temperature -= a
						if(temperature<10)
							temperature+=a*2;
					}
					return temperature;
				}
				
				function run(){
					console.time('Test for pop');
					queue.push(random());
					line.draw();
					console.timeEnd('Test for pop');
				}
				
				function cancel(btn){
					btn.disabled = true;
					if(t){
						clearInterval(t);
					}
					t = null;
					document.getElementById('start_btn').disabled = false;
				}
			</script>
		</head>
		<body>
			<div><a href="../index.html">Home</a>&nbsp; Sample</div>
			<br>
			<div id='myCanvas'></div>
			<div id='tools'>
				<button onclick="start(this);" id='start_btn'>Start</button>
				<button onclick="cancel(this);" id='cancel_btn' disabled="disabled">Stop</button>
			</div>
		</body>
</html>
